<template>
  <div id="index">
    <el-row id="header" :class="{is_fixed_home:activeIndex==='home',is_fixed_other:activeIndex!=='home'&&isFixed}">
      <el-col v-if="activeIndex==='home'" :xs="16" :sm="6" :md="4" :lg="4" :xl="4" :class="{logo_pc:isPC,logo_phone:!isPC}">
        <el-image :src="require('../assets/img/logo_white.png')" fit="fill" @click="switchPage('home')"/>
      </el-col>
      <el-col v-if="activeIndex!=='home'" :xs="16" :sm="6" :md="4" :lg="4" :xl="4" :class="{logo_pc:isPC,logo_phone:!isPC}">
        <el-image :src="require('../assets/img/logo_red.png')" fit="fill" @click="switchPage('home')"/>
      </el-col>
      <el-col v-if="!isPC" :xs="8" :sm="18" :md="20" :lg="20" :xl="20" align="right">
        <span :id="activeIndex==='home' ? 'sideMenu_home' : 'sideMenu_other'" class="el-icon-menu" @click="drawer=true"></span>
      </el-col>
      <el-col v-if="isPC" :xs="8" :sm="18" :md="20" :lg="20" :xl="20" align="right" style="padding-right: 10%;">
        <el-menu
          :default-active="activeIndex"
          id="header_menu"
          :background-color="activeIndex==='home' ? 'transparent' : 'white'"
          :text-color="activeIndex==='home' ? 'white' : '#606266'"
          :active-text-color="activeIndex==='home' ? 'white' : '#409EFF'"
          mode="horizontal"
          @select="switchPage"
        >
          <el-menu-item index="home">首页</el-menu-item>
          <el-menu-item index="company">企业介绍</el-menu-item>
          <el-menu-item index="product">产品服务</el-menu-item>
          <el-menu-item index="news">新闻中心</el-menu-item>
          <el-menu-item index="contact">联系我们</el-menu-item>
        </el-menu>
      </el-col>
    </el-row>
    <el-row id="container">
      <router-view></router-view>
    </el-row>
    <el-row id="footer" :class="{ footer_phone:!isPC,footer_pc:isPC}">
      <el-col :xs="24" :sm="8" :md="8" :lg="8" :xl="8">
        <el-image :src="require('../assets/img/logo_white.png')" fit="fill"/>
        <div>成都小鸣智造科技有限公司</div>
        <div style="margin-top: 30px;font-size: 24px;font-weight: bold;">数字化共享工厂</div>
        <div style="width: 100px;height: 2px;background-color: white;margin: 20px 0px;"/>
        <div style="margin-bottom: 10px;font-size: 16px;">3C类设备类产品总装代工</div>
        <div style="margin-bottom: 10px;font-size: 16px;">3C产品研发设计制造</div>
        <div style="margin-bottom: 10px;font-size: 16px;">制造型企业信息化解决方案提供</div>
      </el-col>
      <el-col v-if="isPC" :xs="24" :sm="6" :md="6" :lg="6" :xl="6">
        <ul>
          <li>精益成本</li>
          <li>专业技术</li>
          <li>柔性制造</li>
          <li>全栈定制</li>
          <li>诚信共赢</li>
        </ul>
      </el-col>
      <el-col :xs="24" :sm="10" :md="10" :lg="10" :xl="10">
        <el-image :src="require('../assets/img/qrcode.jpeg')" fit="fill" style="width: 120px;height: 120px;"/>
        <div style="margin-bottom: 30px;margin-left: 20px;">微信公众号</div>
        <div class="contact_way"><i class="el-icon-phone"></i> 13628046015</div>
        <div class="contact_way"><i class="el-icon-eleme"></i> xiaoming@cdxming.com</div>
        <div class="contact_way"><i class="el-icon-location-information"></i> 成都市郫都区现代工业港北片区长生桥路889号</div>
      </el-col>
    </el-row>
    <div id="beiAn">
      <a href="https://beian.miit.gov.cn" target="_blank" rel="nofollow">© 蜀ICP备2024072876号</a>
      <img src="../assets/img/备案图标.png">
      <a href="https://beian.mps.gov.cn/#/query/webSearch?code=51012402001000" rel="noreferrer" target="_blank">川公网安备51012402001000</a>
      <!-- <span>成都小鸣智造科技有限公司 版权所有</span> -->
    </div>
    <el-drawer
      :visible.sync="drawer"
      size="40%"
      :show-close="false"
      direction="rtl">
      <el-menu :default-active="activeIndex" id="header_menu" text-color="#606266" active-text-color="#409EFF" @select="switchPage">
        <el-menu-item index="home">首页</el-menu-item>
        <el-menu-item index="company">企业介绍</el-menu-item>
        <el-menu-item index="product">产品服务</el-menu-item>
        <el-menu-item index="news">新闻中心</el-menu-item>
        <el-menu-item index="contact">联系我们</el-menu-item>
      </el-menu>
    </el-drawer>
  </div>
</template>
<script>
export default {
  data () {
    return {
      drawer: false,
      isFixed: false,
      activeIndex: 'home',
      isPC: document.documentElement.clientWidth > 800
    }
  },
  mounted () {
    this.switchPage('home')
    window.onresize = () => {
      if (document.documentElement.clientWidth < 800) {
        this.isPC = false
      } else {
        this.isPC = true
      }
    }
    window.addEventListener('scroll', this.handleScroll)
  },
  methods: {
    handleScroll () {
      const scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
      if (scrollTop > 0) {
        this.isFixed = true
      } else {
        this.isFixed = false
      }
    },
    switchPage (key, keyPath) {
      this.drawer = false
      if (this.activeIndex !== key) this.activeIndex = key
      this.$router.push({ name: key })
    }
  },
  destroyed () {
    window.removeEventListener('scroll', this.handleScroll)
  }
}
</script>
<style lang="less">
#index {
  #header {
    height: 70px;
    display: flex;
    align-items: center;
    #header_menu {
      width: 480px;
      border-bottom: none;
      .el-menu-item {
        font-size: 15px!important;
      }
      .el-menu-item:hover {
        background-color: transparent!important;
        color: #409EFF!important;
      }
    }
    .logo_pc {
      height: 40px;
      padding-left: 10%;
      .el-image {
        cursor: hand;
        cursor: pointer;
        width: 157px;
        height:53px;
      }
    }
    .logo_phone {
      height: 30px;
      padding-left: 5px;
      .el-image {
        cursor: hand;
        cursor: pointer;
        width: 117px;
        height:39;
      }
    }
    #sideMenu_home {
      cursor: hand;
      cursor: pointer;
      color: white;
      margin-right: 10px;
      font-size: 26px;
    }
    #sideMenu_other {
      cursor: hand;
      cursor: pointer;
      color:#606266;
      margin-right: 10px;
      font-size: 26px;
    }
  }
  .is_fixed_home {
    background-color: transparent;
    position: fixed;
    top: 0px;
    left: 0px;
    right: 0px;
    z-index: 1000;
  }
  .is_fixed_other {
    background-color: white;
    position: fixed;
    top: 0px;
    left: 0px;
    right: 0px;
    z-index: 1000;
    box-shadow: 0px 5px 5px 0px #c8c8c973;
  }
  .footer_phone{
    padding: 40px 10px;
  }
  .footer_pc{
    padding: 40px 10%;
  }
  #footer {
    background-color: #18233B;
    .el-image {
      width: 154px;
      height:52px;
    }
    li {
      margin-bottom: 30px;
    }
    .contact_way {
      margin-bottom: 10px;
    }
  }
  #beiAn {
    display: flex;
    justify-content: center;
    align-items: center;
    height:30px;
    background-color: #18233B;
    border-top: 1px solid #606266;
    a {
      font-size: 12px;
      color: white;
      margin-right: 10px;
    }
    img {
      width: 15px;
      height: 16px;
      margin-right: 4px;
    }
    span {
      font-size: 12px;
      color: white;
    }
  }
}
</style>
